<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        var images;
        
        function preloadingimg(){
            images = new Array("images/ganfan.png","images/eat.png");
            for(var i = 0; i<images.length;i++){
                var img = new Image();
                img.src = images[i];
            }
        }

        function over(){
                // document.getElementById("#my_img");
                document.images[0].src=images[1];
        }
        

        function out(){
            document.images[0].src=images[0];
        }
    </script>
</head>
<body onload="preloadingimg()">
    <img id="my_img" src="images/ganfan.png" alt="" width="300" height="300" onmouseover="over()" onmouseout="out()">
</body>
</html>